<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="vrPages bg-fff">
            <up-tabs :list="kaiList" :current="currKai" lineColor="#007235" keyName="title" @click="changeKai" v-if="kaiList.length > 0"></up-tabs>

            <block v-if="kaiList.length > 0 && kaiList[currKai].list.length > 0">
                <view class="houseItem top-20" v-for="(item, index) in kaiList[currKai].list" :key="index">
                    <view class="houseTitle flex" @click="navTo(item)">
                        <view class="leftLogo">
                            <image class="header" :src="item.image_list[0].url" mode="aspectFill"></image>
                        </view>
                        <view class="rightTitle flex">
                            <view class="nameBox flex">
                                <view class="title">{{item.product_title}}</view>
                                <view>
                                    <text class="item active" v-if="item.is_sell">在售</text>
                                    <text class="item">VR看房</text>
                                </view>
                            </view>
                            <view class="priceBox">
                                <block v-if="item.price">
                                    <text class="price"><text class="fontNum fontBold font18">{{item.price}}</text>元/m²</text>
                                    <text class="line">|</text>
                                </block>
                                <block v-else-if="item.amount">
                                    <text class="price fontNum">{{item.amount}}</text>
                                    <text class="line">|</text>
                                </block>
                                <text class="area">{{item.area}}</text>
                                <text class="jiedao" v-if="item.street">{{item.street}}</text>
                            </view>
                        </view>
                    </view>
                    <view class="houseType">
                        <block v-if="item.size_type_display">
                            <text class="right-5">{{item.size_type_display}}</text>
                        </block>
                        <block v-if="item.build_size_range">
                            <text class="right-5">{{item.build_size_range}}㎡</text>
                        </block>
                        <block v-if="item.amount_range">
                            <text class="typePrice">约{{item.amount_range}}万元</text>
                        </block>
                    </view>
                    <view class="houseImg flex" @click="toVR(item)" v-if="item.vr_list.length > 0 || item.template_list.length > 0 || item.image_list.length > 0"
                          :style="{backgroundImage: 'url(' + (item.vr_list[0]?.url || item.template_list[0]?.url || item.image_list[0]?.url) +')'}">
                        <view class="iconWrap flex">
                            <image class="aerialIcon" src="https://image.srea.org.cn/xcx/icon/icon-detail-vr-fff.png" mode="widthFix"></image>
                        </view>
                    </view>
                </view>

                <share-btn :display="scrollAnimate"></share-btn>
            </block>
            
            <up-empty text="暂无数据" mode="list" marginTop="100" v-if="!loading && kaiList[currKai]?.list.length == 0"></up-empty>

            <up-loadmore status="nomore" margin-top="10" v-if="!loading && kaiList[currKai]?.list.length > 0" />

            <up-gap height="80" bg-color="#fff"></up-gap>
        </view>
    </block>
</template>

<script>
	import { mapState, mapActions } from 'pinia';
    import { useConfigStore, useUserInfoStore } from '@/store/index';
    import { isBoolean } from '@/common/common';
    import { panListAPI, getProductVRList } from "@/common/api";
    // import { dispatchClient } from '@/common/api-adviser';
    // import { getSellerInfoById } from '@/common/api/adviser';

	export default {
		data() {
			return {
                productId: '',
                kaiId: '',
                kaiList: [],
                currKai: 0,
                loading: true,
				title: '',
                share: false,
                start_time: 0,
                scrollAnimate: false,
                recommendAdviser: {}
            }
		},
        onShareAppMessage(res) {
            return {
                title: `【${this.title}】-VR全景拍摄，速来围观`,
                path: `/pages/product/vr/list/index?productId=${this.productId}&kaiId=${this.kaiId}&puid=${this.userInfo.id}&title=${this.title}&share=true&prepage=VR列表页-${this.productId}-${this.title}`,
            }
        },
        onShareTimeline() {
            return {
                title: `【${this.title}】-VR全景拍摄，速来围观`,
                query: `productId=${this.productId}&kaiId=${this.kaiId}&puid=${this.userInfo.id}&title=${this.title}&share=true&prepage=VR列表页-${this.productId}-${this.title}`
            }
        },
		onLoad(options) {
            const that = this;
            let { productId='', kaiId='', puid='', title='', share=false } = options;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.kaiId = kaiId&&kaiId!=='undefined'?kaiId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);
            uni.setNavigationBarTitle({
                title: `${this.title}VR列表`
            });
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
            
            this.start_time = (new Date()).getTime();
            
            if(this.productId){
            	uni.$check_and_login(function () {
                    that.init();
            	})
            }
		},

        computed:{
			...mapState(useConfigStore, ['scene', 'puid']),
			...mapState(useUserInfoStore, ['userInfo']),
		},
		
        onPageScroll() {
            const that = this;
            that.scrollAnimate = true;
            this.$u.debounce(function() {
                that.scrollAnimate = false;
            }, 500);
        },
        
		methods: {
			...mapActions(useConfigStore, ['setPuid']),

            async init() {
                await this.getPanList();

                //根据顾问ID获取被绑定的顾问信息
                // if(this.puid && this.puid !== this.userInfo.id) {
                //     let sellInfoRes = await getSellerInfoById({id: this.puid, productId: this.productId});
                //     if(sellInfoRes.status === 0) {
                //         if(sellInfoRes.detail.product_id && sellInfoRes.detail.product_id == this.productId) {
                //             this.recommendAdviser = sellInfoRes.detail;
                //         }
                //     }
                // }
            },
            
            //获取开盘id
            async getPanList(){
                try {
                    let panListRes = await panListAPI(this.productId);
                    if(panListRes.status !== 0) {
                        uni.$u.toast(panListRes.detail);
                        return
                    }
                    if(panListRes.detail.length > 0) {
                        this.kaiList = panListRes.detail.map(item => ({
                            ...item,
                            list: [],
                        }))
                        if(this.kaiId) {
                            this.currKai = this.kaiList.findIndex(kai => kai.id == this.kaiId);
                        }
                        await this.getVRList();
                    }
                } catch (error) {console.log(error)}
            },
            
            //获取开盘对应的vr
            async getVRList(){
                let currKaiItem = this.kaiList[this.currKai];
                if(currKaiItem.list.length > 0) return;
                try {
                    let detailRes = await getProductVRList(this.kaiId?this.kaiId:currKaiItem.id);
                    if(detailRes.status !== 0) {
                        uni.$u.toast(detailRes.detail);
                        return
                    }
                    if(detailRes.detail.length > 0) {
                        currKaiItem.list = detailRes.detail;
                    }
                    this.loading = false;
                } catch (error) {console.log(error)}
            },
            
            //切换开盘
            async changeKai({index}){
                if(index === this.currKai) {
                    return
                }
                this.currKai = index;
                this.kaiId = this.kaiList[index].id;
                await this.getVRList();
            },
            
			toVR(item){
                let url = encodeURIComponent(item.vr_url)
                let image = item.vr_list[0]?.url || item.template_list[0]?.url || item.image_list[0]?.url;
                image = encodeURIComponent(image)

				uni.navigateTo({
					url: `/pages/product/article/detail/index?url=${url}&productId=${this.productId}&puid=${this.puid}&title=${item.product_title}(VR)&image=${image}`
				})
			},
            
            //楼盘详情
			navTo(item){
				uni.navigateTo({
					url: `/pages/product/detail/index?productId=${this.productId}&puid=${this.puid}&title=${item.product_title}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vrPages{
		min-height: 100vh;
        overflow: hidden;
		.houseItem{
            padding: 0rpx 28rpx;
			.houseTitle{
				.leftLogo{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					overflow: hidden;
					.header{
						width: 100%;
						height: 100%;
					}
				}
				.rightTitle{
					flex-direction: column;
					align-items: flex-start;
					width: calc(100% - 80rpx);
					padding-left: 20rpx;
					.nameBox{
						line-height: 1;
						display: flex;
						justify-content: space-between;
						.title{
							font-size: 32rpx;
							font-weight: bold;
							margin-right: 20rpx;
						}
						.item{
							margin-right: 20rpx;
							padding: 8rpx 14rpx;
							background-color: #F3F4F8;
							color: #878B8E;
							font-size: 24rpx;
						}
						.active{
							background-color: #677ECE;
							color: #FFFFFF;
						}
					}
					.priceBox{
						line-height: 1;
						margin-top: 14rpx;
						.price{
							color: #E04C1F;
							margin-right: 10rpx;
						}
						.line{
							font-size: 18rpx;
							font-weight: 100;
							margin-right: 10rpx;
						}
						.area{
							color: #7E7F83;
							margin-right: 20rpx;
						}
						.jiedao{
							color: #7E7F83;
						}
					}
				}
			}
			.houseType{
				font-size: 30rpx;
				margin: 20rpx 0rpx;
				.typePrice{
					color: #E04C1F;
				}
			}
			.houseImg{
				height: 370rpx;
				overflow: hidden;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				.iconWrap{
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 50%;
                    background-color: rgba(0,0,0,.5);
                    background-size: 55%;
                    .aerialIcon{
                        width: 60%;
                    }
				}
			}
		}
	}
</style>
